<template>
  <div class="main-container">
    <div class="hotel-services-container">
      <div class="top-section">
        <div class="service-item top-item-1">
          <CheckData></CheckData>
        </div>
        <div class="service-item top-item-2">
          <AllServices
            header-title="Food Quality"
            :icon-path="bigclean"
            @clickTitle="handleServiceClick('cleanness', 'Cleanness')"
          />
        </div>
        <div class="service-item top-item-3">
          <AllServices
            header-title="Service Quality"
            :icon-path="bigbed"
            @clickTitle="handleServiceClick('roomFacilities', 'Room Comfort')"
          />
        </div>
        <div class="service-item top-item-4">
          <AllServices
            header-title="Ambience"
            :icon-path="biglocation"
            @clickTitle="
              handleServiceClick('location', 'Location & neighborhood')
            "
          />
        </div>
      </div>
      <div class="bottom-section" style="margin-top: 20px">
        <div
          class="service-item bottom-item-1"
          style="padding: 11px 0px 11px 0px"
        >
          <div class="content-wrapper">
            <div class="inner-container">
              <div class="icon-wrapper">
                <!-- 注意：需确保 @/assets/pieIcon/clean.png 图片路径正确 -->
                <img src="@/assets/resAndBar/food.png" alt="" class="icon" />
              </div>
              <div class="text-container">Food Quality</div>
            </div>
            <div class="percentage-container">25%</div>
          </div>
          <div class="content-wrapper">
            <div class="inner-container">
              <div class="icon-wrapper">
                <!-- 注意：需确保 @/assets/pieIcon/clean.png 图片路径正确 -->
                <img src="@/assets/resAndBar/service.png" alt="" class="icon" />
              </div>
              <div class="text-container">Service Quality</div>
            </div>
            <div class="percentage-container">25%</div>
          </div>
          <div class="content-wrapper">
            <div class="inner-container">
              <div class="icon-wrapper">
                <!-- 注意：需确保 @/assets/pieIcon/clean.png 图片路径正确 -->
                <img src="@/assets/resAndBar/ambience.png" alt="" class="icon" />
              </div>
              <div class="text-container">Ambience</div>
            </div>
            <div class="percentage-container">25%</div>
          </div>

          <div class="content-wrapper">
            <div class="inner-container">
              <div class="icon-wrapper">
                <!-- 注意：需确保 @/assets/pieIcon/clean.png 图片路径正确 -->
                <img src="@/assets/resAndBar/beverage.png" alt="" class="icon" />
              </div>
              <div class="text-container">Beverage Quality</div>
            </div>
            <div class="percentage-container">25%</div>
          </div>
          <div class="content-wrapper">
            <div class="inner-container">
              <div class="icon-wrapper">
                <!-- 注意：需确保 @/assets/pieIcon/clean.png 图片路径正确 -->
                <img src="@/assets/resAndBar/cleanness.png" alt="" class="icon" />
              </div>
              <div class="text-container">Cleanliness</div>
            </div>
            <div class="percentage-container">25%</div>
          </div>
          <div class="content-wrapper">
            <div class="inner-container">
              <div class="icon-wrapper">
                <!-- 注意：需确保 @/assets/pieIcon/clean.png 图片路径正确 -->
                <img src="@/assets/resAndBar/money.png" alt="" class="icon" />
              </div>
              <div class="text-container">Value for Money</div>
            </div>
            <div class="percentage-container">25%</div>
          </div>
        </div>
        <div class="service-item bottom-item-2">
          <AllServices header-title="Beverage Quality" :icon-path="bigfood" />
        </div>
        <div class="service-item bottom-item-3">
          <AllServices header-title="Cleanliness" :icon-path="bigservices" />
        </div>
        <div class="service-item bottom-item-4">
          <AllServices header-title="Value for Money" :icon-path="bigmoney" />
        </div>
      </div>
    </div>
    <!-- 弹出框 -->
    <!-- <Modal v-if="true"  :pieData="true" :process="true" :list="true" /> -->
    <!-- <DetailPop v-if="isPopupVisible"></DetailPop>
    <div v-if="isPopupVisible" class="mask"></div> -->
    <!-- 弹出框容器 -->
    <div v-if="isPopupVisible" class="popup-container">
      <div class="mask" @click="closePopup"></div>
      <div class="popup-content">
        <DetailPop
          :popupContent="popupContent"
          :categories="currentCategories"
          :key="currentPopupTitle"
          @close="closePopup"
          :title="currentPopupTitle"
          :positive-reviews="getCurrentPositiveReviews"
        />
      </div>
    </div>
  </div>
</template>
<script>
//小饼图的图标
import cleanIcon from "@/assets/pieIcon/clean.png"; // 使用 @ 别名
import roomIcon from "@/assets/pieIcon/room.png"; // 使用 @ 别名
import bigbed from "@/assets/resAndBar/service.png"; // 使用 @ 别名
import bigclean from "@/assets/resAndBar/food.png"; // 使用 @ 别名
import biglocation from "@/assets/resAndBar/ambience.png"; // 使用 @ 别名
import bigsun from "@/assets/pieIcon/bigsun.png"; // 使用 @ 别名

import bigservices from "@/assets/resAndBar/cleanness.png"; // 使用 @ 别名 bigfood
import biglisten from "@/assets/pieIcon/biglisten.png"; // 使用 @ 别名 bigfood
import bigfood from "@/assets/resAndBar/beverage.png";
import bigmoney from "@/assets/resAndBar/money.png";
import CheckData from "./components/CheckData.vue";
import AllServices from "./components/AllServices.vue";
import DetailPop from "./components/DetailPop/DetailPop.vue";

export default {
  name: "ServiceCirPie",
  components: {
    CheckData,
    AllServices,
    DetailPop,
  },
  data() {
    return {
      bigclean,
      cleanIcon,
      roomIcon,
      biglocation,
      bigsun,
      bigbed,
      biglisten,
      bigfood,
      bigservices,
      bigmoney,
      popupContent: "",
      isPopupVisible: false, //弹出框
      allPositiveReviews: [
        {
          key: "cleanness",
          title: "Cleanness",
          data: [
            { name: "Room hygiene", score: 100 },
            { name: "Bathroom hygiene", score: 61 },
            { name: "Public area hygiene ", score: 30 },
            { name: "Odour", score: 23 },
            { name: "Restaurant cleaness ", score: 23 },
          ],
        }, // 清洁度
        {
          key: "roomFacilities",
          title: "Room Comfort",
          data: [
            { name: "Bed quality", score: 87 },
            { name: "Sound insulation", score: 61 },
            { name: "Air conditioning/heating ", score: 72 },
            { name: "Size of the room", score: 23 },
            { name: "Lighting ", score: 23 },
            { name: "Shower water pressure", score: 23 },
            { name: "Room design", score: 23 },
            { name: "In-room amenities", score: 23 },
          ],
        }, // 客房设施
        {
          key: "location",
          title: "Location & Neighborhood",
          data: [
            { name: "Accessibility", score: 100 },
            { name: "Neighborhood facilities", score: 61 },
            { name: "Safety", score: 23 },
            { name: "Views", score: 23 },
          ],
        }, // 位置
        {
          key: "hotelAmenities",
          title: "Hotel Amenities & Atmosphere",
          data: [
            { name: "Wi-Fi & Internet connection", score: 100 },
            { name: "Gym", score: 61 },
            { name: "Swimming pool ", score: 30 },
            { name: "Spa ", score: 23 },
            { name: "Business centre ", score: 23 },
            { name: "Meeting rooms ", score: 23 },
            { name: "Car parking", score: 23 },
            { name: "Executive Lounge", score: 23 },
            { name: "Hotel Atmosphere & Design ", score: 23 },
          ],
        }, // 酒店设施
        {
          key: "guestService",
          title: "Guest Experience & Service",
          data: [
            { name: "Room hygiene", score: 100 },
            { name: "Bathroom hygiene", score: 61 },
            { name: "Public area hygiene ", score: 30 },
            { name: "Odour", score: 23 },
            { name: "Restaurant cleaness ", score: 23 },
          ],
        }, // 服务体验
        {
          key: "foodBeverage",
          title: "Food & Beverage",
          data: [
            { name: "Room hygiene", score: 100 },
            { name: "Bathroom hygiene", score: 61 },
            { name: "Public area hygiene ", score: 30 },
            { name: "Odour", score: 23 },
            { name: "Restaurant cleaness ", score: 23 },
          ],
        }, // 餐饮
        {
          key: "valueForMoney",
          title: "Value for Money",
          data: [
            { name: "Room hygiene", score: 100 },
            { name: "Bathroom hygiene", score: 61 },
            { name: "Public area hygiene ", score: 30 },
            { name: "Odour", score: 23 },
            { name: "Restaurant cleaness ", score: 23 },
          ],
        }, // 性价比
      ],
      // 修正后的数据结构：数组形式，每个元素包含key、title、data
      serviceCategories: [
        {
          key: "cleanness",
          title: "Cleanness",
          data: [
            {
              title: "Odour ",
              data: [
                {
                  title: "Room or hotel smell",
                  score: 8.2,
                  reviewCount: 42,
                  sentiment: "42 positive",
                },
                {
                  title: "Smoke",
                  score: 5.4,
                  reviewCount: 38,
                  sentiment: "35 positive",
                },
                {
                  title: "Mould",
                  score: 4.7,
                  reviewCount: 38,
                  sentiment: "35 positive",
                },
              ],
            },
            {
              title: "Room Hygiene",
              data: [
                {
                  title: "Cleanliness of bed linen",
                  score: 6.2,
                  reviewCount: 42,
                  sentiment: "42 positive",
                },
                {
                  title: "Carpets",
                  score: 9.4,
                  reviewCount: 38,
                  sentiment: "35 positive",
                },
                {
                  title: "Table tops",
                  score: 8.7,
                  reviewCount: 38,
                  sentiment: "35 positive",
                },
                {
                  title: "Bathrooms",
                  score: 6.7,
                  reviewCount: 38,
                  sentiment: "35 positive",
                },
              ],
            },
            {
              title: "Bathroom Hygiene",
              data: [
                {
                  title: "Toilet",
                  score: 7.4,
                  reviewCount: 45,
                  sentiment: "43 positive",
                },
                {
                  title: "Shower ",
                  score: 7.4,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Towels",
                  score: 5.2,
                  reviewCount: 32,
                  sentiment: "30 positive",
                },
                {
                  title: "Toiletries neatness",
                  score: 5.2,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },
            {
              title: "Public area hygiene ",
              data: [
                {
                  title: "Lifts",
                  score: 7.4,
                  reviewCount: 45,
                  sentiment: "43 positive",
                },
                {
                  title: "Lobbies",
                  score: 7.4,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Corridors",
                  score: 5.2,
                  reviewCount: 32,
                  sentiment: "30 positive",
                },
                {
                  title: "Gyms",
                  score: 5.2,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },
            {
              title: "Restaurant cleaness",
              data: [
                {
                  title: "Restaurant cleaness",
                  score: 5.2,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },
          ],
        },
        {
          key: "roomFacilities",
          title: "Room Comfort",
          data: [
            {
              title: "Room design",
              data: [
                {
                  title: "Style of décor/ 9.4",
                  score: 8.8,
                  reviewCount: 50,
                  sentiment: "48 positive",
                },
                {
                  title: "Tables and chairs arranged/ 4.3",
                  score: 7.9,
                  reviewCount: 35,
                  sentiment: "30 positive",
                },
              ],
            },
            {
              title: "roomFacilities",
              data: [
                {
                  title: "In-room amenaties",
                  score: 8.2,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
              ],
            },
            
            {
              title: "Shower water pressure",
              data: [
                {
                  title: "is the water pressure stable and is there a problem",
                  score: 8.2,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
              ],
            },
            {
              title: "Sound insulation",
              data: [
                {
                  title: "Neighbor noise",
                  score: 8.2,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
                {
                  title: "Corridor noise",
                  score: 8.2,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
                {
                  title: "Street can be heard",
                  score: 8.2,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
              ],
            },
            {
              title: "Air conditioning/heating",
              data: [
                {
                  title: "Temperature control accurate",
                  score: 8.2,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
              ],
            },
            {
              title: "Size of the room",
              data: [
                {
                  title: "Is there enough storage space for luggage",
                  score: 8.2,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
              ],
            },
            {
              title: "Lighting",
              data: [
                {
                  title: "is the room lit bright enough for office/reading",
                  score: 8.2,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
              ],
            },
          ],
        },
        {
          key: "location",
          title: "Location & Neighborhood",
          data: [
            {
              title: "Accessibility",
              data: [
                {
                  title: "Metro station",
                  score: 9.4,
                  reviewCount: 55,
                  sentiment: "53 positive",
                },
                {
                  title: "Bus station",
                  score: 7.8,
                  reviewCount: 30,
                  sentiment: "25 positive",
                },
              ],
            },
            {
              title: "Neighborhood facilities",
              data: [
                {
                  title: "Restaurants",
                  score: 8.2,
                  reviewCount: 48,
                  sentiment: "46 positive",
                },
                {
                  title: "Supermarkets",
                  score: 1.8,
                  reviewCount: 42,
                  sentiment: "40 positive",
                },
                {
                  title: "Shopping malls",
                  score: 1.7,
                  reviewCount: 35,
                  sentiment: "32 positive",
                },
              ],
            },
            {
              title: "Safety",
              data: [
                {
                  title: "Surroundings safe",
                  score: 9.2,
                  reviewCount: 48,
                  sentiment: "46 positive",
                },
                {
                  title: "The nights suitable for walking",
                  score: 7.8,
                  reviewCount: 42,
                  sentiment: "40 positive",
                },
              ],
            },
            {
              title: "Views",
              data: [
                {
                  title: "Availability of sea views",
                  score: 8.2,
                  reviewCount: 48,
                  sentiment: "46 positive",
                },
                {
                  title: "City views",
                  score: 7.8,
                  reviewCount: 42,
                  sentiment: "40 positive",
                },
                {
                  title: "Mountain views",
                  score: 7.7,
                  reviewCount: 35,
                  sentiment: "32 positive",
                },
              ],
            },
          ],
        },
        {
          key: "hotelAmenities",
          title: "Hotel Amenities & Atmosphere",
          data: [
            {
              title: "Executive Lounge",
              data: [
                {
                  title: "Executive Lounge",
                  score: 9.0,
                  reviewCount: 46,
                  sentiment: "44 positive",
                },
              ],
            },
            {
              title: "Hotel Atmosphere & Design ",
              data: [
                {
                  title: "Vibe",
                  score: 7.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Aesthetic appeal",
                  score: 8.9,
                  reviewCount: 43,
                  sentiment: "41 positive",
                },
                {
                  title: "Decorations)",
                  score: 8.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },
            {
              title: "Car parking ",
              data: [
                {
                  title: "Parking Price",
                  score: 7.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Adequacy of spaces",
                  score: 6.9,
                  reviewCount: 43,
                  sentiment: "41 positive",
                },
                {
                  title: "Security",
                  score: 6.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },
            {
              title: "Wi-Fi & Internet connection",
              data: [
                {
                  title: "Speed",
                  score: 9.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Stability",
                  score: 9.9,
                  reviewCount: 43,
                  sentiment: "41 positive",
                },
                {
                  title: "Free/charge situation",
                  score: 9.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },
            {
              title: "Gym",
              data: [
                {
                  title: "Equipment abundance",
                  score: 9.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Opening hours",
                  score: 8.9,
                  reviewCount: 43,
                  sentiment: "41 positive",
                },
                {
                  title: "Maintenance",
                  score: 1.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },
            {
              title: "Swimming pool ",
              data: [
                {
                  title: "Water quality",
                  score: 7.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Temperature",
                  score: 5.9,
                  reviewCount: 43,
                  sentiment: "41 positive",
                },
                {
                  title: "Availability of lifeguards",
                  score: 1.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Opening hours",
                  score: 1.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },
            {
              title: "Teleconferencing equipment",
              data: [
                {
                  title: "Massage/treatment service quality",
                  score: 8.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Facility environment",
                  score: 9.9,
                  reviewCount: 43,
                  sentiment: "41 positive",
                },
              ],
            },
            {
              title: "Business centre",
              data: [
                {
                  title: "Printers",
                  score: 7.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Meeting rooms",
                  score: 6.9,
                  reviewCount: 43,
                  sentiment: "41 positive",
                },
                {
                  title: "Teleconferencing equipment/ 6.1",
                  score: 6.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },
            {
              title: "Meeting rooms",
              data: [
                {
                  title: "Space",
                  score: 7.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Equipment",
                  score: 6.1,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
                {
                  title: "Catering/ 6.1",
                  score: 6.7,
                  reviewCount: 40,
                  sentiment: "38 positive",
                },
              ],
            },
          ],
        },
        {
          key: "guestService",
          title: "Guest Experience & Service",
          data: [
            {
              title: "Staff Performance",
              data: [
                {
                  title: "Friendliness",
                  score: 9.3,
                  reviewCount: 52,
                  sentiment: "50 positive",
                },
                {
                  title: "Response Time",
                  score: 8.4,
                  reviewCount: 37,
                  sentiment: "34 positive",
                },
              ],
            },
            {
              title: "Problem Resolution",
              data: [
                {
                  title: "Complaint Handling",
                  score: 8.1,
                  reviewCount: 29,
                  sentiment: "26 positive",
                },
                {
                  title: "Request Fulfillment",
                  score: 8.7,
                  reviewCount: 41,
                  sentiment: "39 positive",
                },
              ],
            },
          ],
        },
        {
          key: "foodBeverage",
          title: "Food & Beverage",
          data: [
            {
              title: "Breakfast",
              data: [
                {
                  title: "Variety",
                  score: 8.6,
                  reviewCount: 39,
                  sentiment: "36 positive",
                },
                {
                  title: "Quality",
                  score: 8.9,
                  reviewCount: 44,
                  sentiment: "42 positive",
                },
              ],
            },
            {
              title: "Room Service",
              data: [
                {
                  title: "Delivery Time",
                  score: 8.2,
                  reviewCount: 33,
                  sentiment: "30 positive",
                },
                {
                  title: "Food Temperature",
                  score: 8.5,
                  reviewCount: 36,
                  sentiment: "34 positive",
                },
              ],
            },
          ],
        },
        {
          key: "valueForMoney",
          title: "Value for Money",
          data: [
            {
              title: "Pricing",
              data: [
                {
                  title: "Room Rate",
                  score: 7.9,
                  reviewCount: 45,
                  sentiment: "38 positive",
                },
                {
                  title: "Extra Charges",
                  score: 7.5,
                  reviewCount: 32,
                  sentiment: "28 positive",
                },
              ],
            },
            {
              title: "Offers",
              data: [
                {
                  title: "Discounts",
                  score: 8.3,
                  reviewCount: 28,
                  sentiment: "25 positive",
                },
                {
                  title: "Loyalty Program",
                  score: 8.7,
                  reviewCount: 36,
                  sentiment: "34 positive",
                },
              ],
            },
          ],
        },
      ],
      currentCategories: [],
      currentPopupTitle: "",
    };
  },
  computed: {
    getCurrentPositiveReviews() {
      // 根据当前点击的分类 key 查找对应的 positiveReviews 数据
      const currentKey = this.serviceCategories.find(
        (item) => item.data === this.currentCategories
      )?.key;

      return (
        this.allPositiveReviews.find((item) => item.key === currentKey)?.data ||
        []
      ); // 返回对应的 data 数组，默认空数组
    },
  },
  methods: {
    handleServiceClick(serviceKey, title) {
      const category = this.serviceCategories.find(
        (item) => item.key === serviceKey
      );
      if (category) {
        this.currentCategories = category.data;
        this.currentPopupTitle = title; // 确保 title 正确传递
        this.isPopupVisible = true;
      }
    },
    closePopup() {
      this.isPopupVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.main-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.7917rem;
  margin: 30px 0 0 0;

  .hotel-services-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;

    .top-section {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 50%; // 占满父容器的一半高度
      .service-item {
        flex: 1; // 使每个item平均分配剩余空间
        // height: 1.2708rem;
        border-radius: 8px;
        height: 100%; // 显式继承高度
        background: #fff;
        border: 1px solid #cdcccc;
        margin-right: 20px;
        min-width: 0;
        box-sizing: border-box; // 包含 padding 和 border 到高度计算中
        // 特别针对第一个item的调整
        &.top-item-1 {
          ::v-deep .analytics-card {
            // 穿透scoped样式
            height: 100%;
            padding: 0;

            .chart-container {
              height: calc(100% - 30px); // 减去标题高度
            }
          }
        }
      }
      .service-item:last-child {
        margin-right: 0px;
      }
    }

    .bottom-section {
      display: flex;
      align-items: center;
      align-items: stretch; // 让子项拉伸高度
      justify-content: space-between;
      width: 100%;
      align-items: stretch; // 关键：让子项可以拉伸高度
      height: 50%; // 占满父容器的一半高度
      .service-item {
        flex: 1;
        // height: 100%; // 显式继承高度
        min-width: 0;
        height: 100%; // 显式继承高度
        border-radius: 8px;
        background: #fff;
        border: 1px solid #cdcccc;
        margin-right: 20px;
        position: relative; /* 统一设置定位上下文 */
        box-sizing: border-box; // 包含 padding 和 border 到高度计算中
        &.bottom-item-1 {
          display: flex; // 容器使用 Flex 布局
          flex-direction: column; // 垂直排列子项
          padding: 11px; // 统一内边距，替代边距
          .content-wrapper {
            // 移除固定 margin-bottom，改用 margin-top 并结合 flex-grow 自动间隔
            margin-top: 10px; // 内容块之间的顶部间距
            &:first-child {
              margin-top: 0; // 第一个元素移除顶部间距
            }
            // 关键：利用 flex-grow 让内容块自适应分布
            flex-grow: 1; // 允许内容块拉伸填充剩余空间
            min-height: 0; // 解决 flex 子项最小高度问题
          }
        }
      }
      .service-item:last-child {
        margin-right: 0px;
      }
    }
  }
}

.inner-container {
  display: flex;
  align-items: center;
}

.icon-wrapper {
  margin-left: 11px;
  width: 0.1111rem;
  height: 0.1111rem;
  border-radius: 50%;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.icon {
  width: 9px;
  height: 9px;
}
.bottom-item-5 {
  box-sizing: border-box;
  .kpi-container {
    margin-top: 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 53px; // 模拟其他 item 的间距

    .kpi-label {
      margin-left: 11px;
      font-size: 10px;
      font-weight: 600;
      color: #6a6969;
    }
    .kpi-percentage {
      font-size: 12px;
      font-weight: 600;
      color: #6a6969;
    }
    .kpi-icon {
      margin-right: 11px;
      // img {
      //   height: 18px;
      //   width: 18px;
      // }
    }
  }
}
.text-container {
  margin-left: 7px;
  font-weight: 400;
  font-size: 14px;
  color: #6a6969;
  word-break: break-all; // 允许任意位置换行
}

.percentage-container {
  margin-left: 10px;
  color: #5a86dd;
  font-size: 0.0694rem;
  font-weight: 500;
  opacity: 0.7; /* 设置透明度为70% */
  margin-right: 11px;
}

.content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content-wrapper:not(:last-child) {
  // margin-bottom: 10px;
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 10;
  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
// 新增弹窗容器样式
.popup-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; // 确保在最上层

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }

  .popup-content {
    position: relative;
    z-index: 2;
    width: 100%; // 可根据需要调整宽度
    max-width: 733px; // 最大宽度限制
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
  }
}
.popup-content {
  margin-bottom: 10px;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); // 半透明黑色背景
  z-index: 9;
}
</style>
